import React, { useEffect, useState } from 'react';
import { View, Animated, Easing } from 'react-native';

const HeartLoader = () => {
  const [rotation] = useState(new Animated.Value(0));

  useEffect(() => {
    startAnimation();
  }, []);

  const startAnimation = () => {
    rotation.setValue(0);
    Animated.timing(rotation, {
      toValue: 1,
      duration: 1500,
      easing: Easing.linear,
      useNativeDriver: true,
    }).start(() => startAnimation());
  };

  const interpolatedRotation = rotation.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '360deg'],
  });

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Animated.View
        style={{
          transform: [{ rotate: interpolatedRotation }],
        }}
      >
        <View
          style={{
            width: 50,
            height: 50,
            borderRadius: 25,
            borderWidth: 2,
            borderColor: 'red',
            borderStyle: 'solid',
            position: 'absolute',
            top: -10,
            left: 0,
            transform: [{ rotate: '-45deg' }],
          }}
        />
        <View
          style={{
            width: 50,
            height: 50,
            borderRadius: 25,
            borderWidth: 2,
            borderColor: 'red',
            borderStyle: 'solid',
            position: 'absolute',
            top: -10,
            right: 0,
            transform: [{ rotate: '45deg' }],
          }}
        />
        <View
          style={{
            width: 50,
            height: 50,
            borderRadius: 25,
            borderWidth: 2,
            borderColor: 'red',
            borderStyle: 'solid',
            position: 'absolute',
            top: 0,
            left: -10,
            transform: [{ rotate: '45deg' }],
          }}
        />
        <View
          style={{
            width: 50,
            height: 50,
            borderRadius: 25,
            borderWidth: 2,
            borderColor: 'red',
            borderStyle: 'solid',
            position: 'absolute',
            top: 0,
            right: -10,
            transform: [{ rotate: '-45deg' }],
          }}
        />
        <View
          style={{
            width: 50,
            height: 50,
            borderRadius: 25,
            borderWidth: 2,
            borderColor: 'red',
            borderStyle: 'solid',
            position: 'absolute',
            top: 10,
            left: -10,
            transform: [{ rotate: '90deg' }],
          }}
        />
        <View
          style={{
            width: 50,
            height: 50,
            borderRadius: 25,
            borderWidth: 2,
            borderColor: 'red',
            borderStyle: 'solid',
            position: 'absolute',
            top: 10,
            right: -10,
            transform: [{ rotate: '-90deg' }],
          }}
        />
        <View
          style={{
            width: 50,
            height: 50,
            borderRadius: 25,
            borderWidth: 2,
            borderColor: 'red',
            borderStyle: 'solid',
            position: 'absolute',
            top: 20,
            left: 0,
            transform: [{ rotate: '135deg' }],
          }}
        />
        <View
          style={{
            width: 50,
            height: 50,
            borderRadius: 25,
            borderWidth: 2,
            borderColor: 'red',
            borderStyle: 'solid',
            position: 'absolute',
            top: 20,
            right: 0,
            transform: [{ rotate: '-135deg' }],
          }}
        />
      </Animated.View>
    </View>
  );
};

export default HeartLoader;
